<template>
    <div>
        <div id="search">
            <el-form :inline="true" :model="studentSearch" class="demo-form-inline">
                <el-form-item label="学号">
                    <el-input v-model="studentSearch.studentNo" placeholder="请输入学号"></el-input>
                </el-form-item>
                <el-form-item label="班级">
                    <el-input v-model="studentSearch.clazz" placeholder="请输入班级"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearchSubmit">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-share" @click="exportStudentExcel">导出数据</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div id="header-bth">
            <el-button type="primary" size="small" icon=el-icon-circle-plus-outline @click="showAddStudent">添加
            </el-button>
            <el-button type="primary" size="small" icon=el-icon-circle-plus-outline @click="uploadDialogVisible=true">
                批量导入
            </el-button>
        </div>
        <div id="student-table">
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                <el-table-column label="学号">
                    <template slot-scope="scope">
                        <span style="margin-left: 20px">{{ scope.row.studentNo }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="姓名">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="年龄">
                    <template slot-scope="scope">
                        <span>{{ scope.row.age }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="课程名称">
                    <template slot-scope="scope">
                        <span>{{ scope.row.courseName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="班级">
                    <template slot-scope="scope">
                        <span>{{ scope.row.clazz }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="手机号">
                    <template slot-scope="scope">
                        <span>{{ scope.row.tel }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="入学时间" width="150px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.schoolYear }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="280px">
                    <template slot-scope="scope">
                        <el-button
                                icon="el-icon-edit"
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">
                        </el-button>

                        <el-popconfirm title="确定删除吗？" @confirm="deleteStudent(scope.$index, scope.row)">
                            <el-button
                                    slot="reference"
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete">
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="nav-page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="pageSizes"
                    :page-size="studentSearch.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <!--添加 编辑学生信息弹窗-->
        <el-dialog :title="dialogTitle" :visible.sync="addStudentFormVisible" width="50%" @close="clearInfo">
            <el-form :model="studentForm" ref="studentInfo" :rules="studentRules" label-width="90px" size="medium">
                <el-input v-model="studentForm.id" autocomplete="off" v-show="false"></el-input>
                <el-form-item label="学号" prop="studentNo">
                    <el-input v-model="studentForm.studentNo" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="studentForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="studentForm.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="tel">
                    <el-input v-model="studentForm.tel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程名称" prop="courseId">
                    <el-select v-model="studentForm.courseId" placeholder="请选择课程名称" style="width: 100%">
                        <el-option v-for="(course,index) in courseList" :label="course.courseName" :key="index"
                                   :value="course.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级" prop="clazz">
                    <el-input v-model="studentForm.clazz" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="入学时间" prop="schoolYear">
                    <el-date-picker
                            style="width: 100%"
                            v-model="studentForm.schoolYear"
                            type="date"
                            placeholder="选择入学时间日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
            </div>
        </el-dialog>
        <!--批量导入弹窗-->
        <el-dialog title="导入学生信息" :visible.sync="uploadDialogVisible" width="27%">
            <el-upload
                    drag
                    class="upload-demo"
                    action='#'
                    name='file'
                    accept=".xls,.xlsx"
                    :show-file-list="false"
                    :http-request="uploadFile"
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
        </el-dialog>

    </div>
</template>

<script>
    import fileDownload from "js-file-download";
    import {
        addOrUpdateStudentApi,
        batchStudentApi,
        courseSelectApi, deleteStudentByIdApi,
        downLoadApi,
        exportStudentExcelApi, getStudentByIdApi,
        studentPageApi
    } from "@/request/api";

    export default {
        name: "RoleView",
        data() {
            return {
                tableData: [],
                pageSizes: [3, 5, 10, 15],
                total: 10,
                addStudentFormVisible: false,
                uploadDialogVisible: false, // 上传弹窗
                dialogTitle: '',
                studentForm: {
                },
                studentSearch: {  // 搜索数据
                    limit: 3,
                    currentPage: 1
                },
                studentRules: {
                    name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
                    studentNo: [{required: true, message: '请输入学号', trigger: 'blur'}],
                    courseId: [{required: true, message: '请选择专业', trigger: 'blur'}],
                    clazz: [{required: true, message: '请输入班级名称', trigger: 'blur'}],
                    age: [{required: true, message: '请输入年龄', trigger: 'blur'}],
                    tel: [{required: true, message: '请选择手机号', trigger: 'blur'}],
                    schoolYear: [{required: true, message: '请选择入学日期', trigger: 'blur'}]
                },
                /*添加学生对象弹出层 课程下拉选数据*/
                courseList: []
            }
        },
        methods: {
            // 自定义上传
            uploadFile(file) {
                // 创建表单数据对象 封装file数据
                let formData = new FormData();
                // username = tom    file.file 获取上传文件数据
                formData.append("file", file.file)
                batchStudentApi(formData).then(response => {
                    if (response.code == 200) {
                        this.$message.success(response.msg)
                        this.uploadDialogVisible = false,
                            this.list()
                        return
                    }
                    this.$message.warning(response.msg)
                }).catch(error => {
                    this.$message.error("连接失败")
                })
            },
            // 批量导出数据
            exportStudentExcel() {
                exportStudentExcelApi(this.studentSearch).then(response => {
                    fileDownload(response, new Date().getTime() + ".xlsx"); // 使用js-file-download来接收二进制流然后下载
                })
            },
            // 编辑学生信息
            async handleEdit(index, row) {
                this.dialogTitle = "编辑学生"
                this.addStudentFormVisible = true
                //  发送异步请求 根据id实现学生数据的回显
                let {data} = await getStudentByIdApi(row.id)
                this.studentForm=data
            },
            // 删除学生信息
            deleteStudent(index, row) {
                // 发送异步请求 根据id 删除学生信息
                deleteStudentByIdApi(row.id).then(response=>{
                    if (response.code==200){
                        this.$message.success(response.msg)
                        this.list()
                        this.addStudentFormVisible=false
                        return
                    }
                    this.$message.warning(response.msg)
                }).catch(error=>{
                    this.$message.error("请求失败")
                })
            },
            // 添加或编辑学生信息
            saveOrUpdate() {
                this.$refs.studentInfo.validate(valid => {
                    if (!valid) {
                        this.$message.warning("请填写必要数据")
                        return
                    }
                    addOrUpdateStudentApi(this.studentForm).then(response=>{
                        if(response.code==200){
                            this.$message.success(response.msg)
                            this.list()
                            this.addStudentFormVisible=false
                            return
                        }
                        this.$message.warning(response.msg)
                    }).catch(error=>{
                        this.$message.error("请求失败")
                    })
                })
            },
            // 搜索
            onSearchSubmit() {
                this.studentSearch.currentPage = 1
                this.list()
            },
            // 改变每页显示的条数触发
            handleSizeChange(val) {
                this.studentSearch.limit = val;
                this.list()
            },
            // 改变页码触发
            handleCurrentChange(val) {
                this.studentSearch.currentPage = val;
                this.list()
            },
            // 显示弹出层
            showAddStudent() {
                this.dialogTitle = "添加学生"
                this.addStudentFormVisible = true
            },
            //清空校验规则
            clearInfo() {
                this.studentForm = {}
                this.$refs.studentInfo.clearValidate()
            },
            list() {
                studentPageApi(this.studentSearch).then(response => {
                    this.tableData = response.data.currentPageData
                    this.total = response.data.total
                })
            },
            // 课程名称下拉选异步请求
            async courseSelect() {
                let {data} = await courseSelectApi()
                this.courseList = data
            }
        },
        created() {
            // 查询学生列表
            this.list()
            // 渲染课程下拉选
            this.courseSelect()
        }
    }
</script>

<style scoped>
    #search {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #eee;
    }

    #search, #header-bth, #nav-page {
        margin: 15px;
    }

    #student-table {
        width: 100%;
    }

    .el-button {
        margin-left: 5px;
        margin-right: 5px;
    }
</style>

